<template>
    <div class="app-container">
        <div style="margin-bottom: 10px">
            <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                v-hasPermi="['system:userType:add']"
                @click="handAdd(true)"
                >新增</el-button
            >
        </div>

        <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="categoryId"
            border
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column
                type="index"
                :index="indexMethod"
                align="center"
                width="60"
                label="序号"
            >
            </el-table-column>
            <el-table-column prop="categoryName" label="名称"> </el-table-column>
            <el-table-column prop="createBy" label="创建人">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.sys_type_status"
                        :value="scope.row.status"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="220"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleStatus(scope.row)"
                        v-hasPermi="['system:userType:status']"
                        >{{ scope.row.status == '0' ? "禁用" : "启用" }}
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleAddChild(scope.row)"
                        v-hasPermi="['system:userType:addChild']"
                        >新增子类</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleEdit(scope.row)"
                        v-hasPermi="['system:userType:edit']"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleDel(scope.row)"
                        v-hasPermi="['system:userType:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加分类" :visible.sync="dialogVisible" width="700px">
            <el-form :model="form" ref="addForm">
                <el-form-item label="父级分类" label-width="150" v-if="form.parentName">
                    <!-- <el-select
                        v-model="form.region"
                        placeholder="请选择父级"
                        style="width: 500px"
                    >
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select> -->
                    <el-input
                        disabled
                        v-model.trim="form.parentName"
                        style="width: 500px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input
                        v-model.trim="form.categoryName"
                        style="width: 500px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态" label-width="80">
                        <el-radio v-model="form.status" v-for="dict in dict.type.sys_type_status"
                            :key="dict.value"
                            :label="dict.value">{{ dict.label }}</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false"  :loading="loading">取 消</el-button>
                <el-button type="primary" @click="onSave" :loading="loading" :disabled="!form.categoryName"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { list, addType, updateType, delUserType } from "@/api/system/case";
export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            form: {
                status: "",
                categoryName: "",
                parentId: "",
                parentName: ""
            },
            loading: false
        };
    },
    dicts: ["sys_type_status"],
    methods: {
        async onSave () {
            this.loading = true
            try {
                if (this.form.categoryId) {
                    await this.updateType(this.form)
                } else {
                    await addType(this.form).then(res => {
                        this.dialogVisible = false
                        this.getList()
                    })
                }
                this.loading = false

            } catch (err) {
                this.loading = false
            }
            
        },
        default () {
            this.form = {
                status: "",
                categoryName: "",
                parentId: "",
                parentName: ""
            }
        },
        // 新增
        handAdd(isAdd) {
            if (isAdd) this.default()
            this.resetForm("addForm");
            this.form.status = this.form.status || "0"
            this.dialogVisible = true;
        },
        handleAddChild (row) {
            this.default()
            this.form.parentId = row.categoryId
            this.form.parentName = row.categoryName
            this.form.categoryName = ""
            this.handAdd()
        },
         // 编辑
        handleEdit(row) {
            this.default()
            this.form.parentId = row.parentId
            this.form.parentName = row.parentName
            this.form.categoryName = row.categoryName
            this.form.categoryId = row.categoryId
            this.handAdd()
        },
        handleStatus(row) {
            let { status, categoryId, categoryName, parentId , parentName} = row
            this.$msgbox({
                title: "是否确认"+ (status == '0' ? '禁用' : '启用'),
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
              
            }).then((action) => {
                this.updateType({ categoryId, categoryName, parentId , parentName,  status: status == '0' ? '1' : '0'})
            });
            
        },
        // 保存编辑
        updateType (data) {
            updateType(data).then(res => {
                this.dialogVisible = false
                this.getList()
            })
        },
        indexMethod(index) {
            return index + 1;
        },
        
        // 删除
        handleDel(row) {
            this.$msgbox({
                title: "是否确认删除",
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
              
            }).then((action) => {
                delUserType(row.categoryId).then(res => {
                    this.$message.success("删除成功");
                    this.getList()
                })
                
            });
        },
       
        // 获取列表
        getList () {
            list().then(res => {
                console.log(res)
                this.tableData = res.data
            })
        }
    },
    mounted () {
        this.getList()
    }
};
</script>

<style>
</style>